<template>
  <div>
    <ElTable :data="list" stripe border>
      <ElTableColumn label="分类名称" prop="tname" width="200"></ElTableColumn>
      <ElTableColumn label="分类简介" prop="intro"></ElTableColumn>
      <ElTableColumn label="操作" width="100">
        <template #default="s">
          <ElButton @click="selected(s.row)">选择</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <PageComp :page="page" @page-change="query"></PageComp>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElTable, ElTableColumn } from 'element-plus'
import { ApiService } from '../ts/ApiService'
import { TbSoftwareType } from '../ts/types/CRUD'
import { BaseDataResult, BasePageVO, PageBean } from '../ts/types/BaseResult'
import PageComp from './PageComp.vue'

const emits = defineEmits(['type-selected'])

function selected(info: TbSoftwareType) {
  emits('type-selected', info)
}

const list = ref([] as Array<TbSoftwareType>)
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)

const query = () => {
  ApiService.get(`/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`, {}, (resp: BaseDataResult<BasePageVO<Array<TbSoftwareType>>>) => {
    if (resp.success) {
      list.value = resp.data.data
      page.value = resp.data.pageBean
    }
  })
}

query()
</script>
<style lang="scss" scoped></style>
